<template>

    <!-- 标题 -->
    <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div id="v-body">
        <!-- logo -->
        <div class="v-box">
            <div class="v-photo">
                <van-image src="https://img.zcool.cn/community/01f8b6593a0054a8012193a31c86c5.jpg@2o.jpg" />
            </div>
            <!-- 文本 -->
            <div class="v-text">
                <h6 class="v-h6">好吃好喝</h6>
                <p class="v-p">一家只卖当日菜的社区电商</p>
            </div>
        </div>

        <!-- 手机号登录 -->
        <div class="v-btn">
            <!-- 手机按钮 -->
            <van-button round type="success"  to="/phone" >&ensp; 用户登录&ensp; </van-button>
            <!-- 微信按钮 -->
            <van-button round type="success" to="/register" color="rgb(250,79,81)"> &emsp;用户注册&emsp; </van-button>
        </div>
    </div>



</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
const router = useRouter()
// 返回上一级
const onClickLeft = () =>  {router.push('/home')}


</script>


<style lang="scss" scoped>
html {
    width: 100%;
    height: 100%;
}

#v-body {
    width: 100%;
    height: 100%;

    // background: blue;
    .v-box {
        width: 100%;
        height: 100%;
        padding-top: 40%;


        .v-photo {
            width: 40%;
            height: 40%;
            margin: 0 auto;

            van-image {
                width: 100%;
                height: 100%;
            }
        }

        .v-text {
            width: 100%;
            height: 20%;
            margin-top: -70px;

            .v-h6 {
                font-size: 28px;
                text-align: center;
                font-weight: 500;

            }

            .v-p {
                line-height: 20px;
                text-align: center;
                font-size: 20px;
                margin-top: -20px;
                color: rgb(200, 188, 159);

            }
        }


    }

    .v-btn {
        width: 100%;
        margin-top: 20%;
        display: flex;
        justify-content: space-around;

        v-button {
            width: 156px;
            height: 40px;
        }

    }
}
</style> 


